<template>
  <div id="aside">
    <!-- <ul class="aside-list">
      <li
        v-for="(name, index) in asideList"
        :key="index"
      >
        <div class="first-tree" v-if="name.firstName">
          {{ name.firstName }}
        </div>
        <ul class="next-tree" @click="target">
          <li
            class="aside-item"
            v-for="next in name.nextName"
            :key="next.id"
            :ref="`aside${next.id}`"
          >
            <span :data-active="next.id" class="pointer text-hidden">
              <i class="iconfont" :class="{
                'icon-shoucangaixinxin': next.specialType === 5,
                'icon-gedan': next.specialType >= 0 && next.specialType !== 5
              }"></i>
              {{ next.name }}
            </span>
          </li>
        </ul>
      </li>
    </ul> -->
  
    <a-menu
      mode="inline"
      class="aside-list"
      :default-selected-keys="activeMenu"
      :selected-keys="activeMenu"
      :default-open-keys="['收藏的歌单', '创建的歌单']"
      @click="changeMenu"
    >
      <a-menu-item
        v-for="item in commentList"
        :key="item.path"
        :disabled="item.Login && !isLogin"
      >
        <!-- <a-icon type="pie-chart" /> -->
        <span>{{ item.title }}</span>
      </a-menu-item>
      <a-menu-item-group>
        <template slot="title">我的音乐</template>
        <a-menu-item
          v-for="item in myList"
          :key="item.path"
          :disabled="item.Login && !isLogin"
        >

          <span>{{ item.title }}</span>
        </a-menu-item>
      </a-menu-item-group>

      <a-sub-menu key='创建的歌单' title="创建的歌单">
        <a-menu-item
          v-for="item in createdList"
          :key="item.id"
        >
          <i class="iconfont icon-gedan"></i>
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu key="收藏的歌单" title="收藏的歌单">
        <a-menu-item
          v-for="item in subList"
          :key="item.id"
        >
          <i class="iconfont icon-gedan"></i>
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-sub-menu>
      <!-- <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
        <a-menu-item key="9">
          Option 9
        </a-menu-item>
        <a-menu-item key="10">
          Option 10
        </a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="11">
            Option 11
          </a-menu-item>
          <a-menu-item key="12">
            Option 12
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu> -->
    </a-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Menu } from 'ant-design-vue';
// import { subList } from '@/api/detail';
// import { playListU } from '@/api/detail';

export default {
  name: 'Aside',

  components: {
    AMenu: Menu,
    AMenuItem: Menu.Item,
    ASubMenu: Menu.SubMenu,
    AMenuItemGroup: Menu.ItemGroup
  },

  data() {
    return {
      asideList: [
        { path: 'discovermusic', title: '发现音乐', Login: false, type: 0 },
        { path: 'dailyspecial', title: '每日推荐', Login: true, type: 1 },
        { path: 'video', title: '视频', Login: true, type: 0 },
        { path: 'privateFM', title: '私人FM', Login: true, type: 0 },
        { path: 'recentplay', title: '最近播放', Login: false, type: 1 },
        { path: 'myfavorite', title: '我的收藏', Login: true, type: 1 },
      ],
      // 创建歌单
      createdList: [],
      // 收藏歌单
      subList: [],
      // 默认选中
      activeMenu: ['discovermusic']
    };
  },

  computed: {
    ...mapState({
      userPlayList: state => state.detail.userPlayList,
      // userInfo: state => state.detail.userInfo
    }),
    commentList() {
      return this.asideList.filter((item) => item.type == 0);
    },
    myList() {
      return this.asideList.filter((item) => item.type == 1);
    },
    isLogin() {
      return this.createdList && this.createdList.length
    }
  },

  watch: {
    userPlayList: {
      handler(value) {
        if (value && value.length) {
          this.createdList = value.filter(item => !item.subscribed);
          this.subList = value.filter(item => item.subscribed);
        }
      },
      immediate: true
    },
    '$route': {
      handler(value) {
        console.log(value)
        if (value.query && Object.keys(value.query).length) {
          this.activeMenu = [Number(value.query.id)];
          console.log(this.activeMenu)
        } else {
          const discover = ['recommendation', 'songmenu', 'ranklist', 'singer', 'newsongs'];
           const video = ['subvideo', 'submv'];
          if (discover.includes(value.name)) {
            this.activeMenu = ['discovermusic'];
            return;
          }
          if (video.includes(value.name)) {
            this.activeMenu = ['video'];
            return;
          }
          this.activeMenu = [value.name];
        }
      },
      immediate: true
    }
  },

  mounted() {
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('userPlayList', JSON.stringify([...this.createdList, ...this.subList]));
    });
    const list = JSON.parse(localStorage.getItem('userPlayList'));
    if (list && list.length) {
      this.$store.commit('detail/USERPLAYLIST', list);
    }
  },

  methods: {
    // 点击导航栏跳转
    changeMenu({ item, key, keyPath }) {
      console.log(item, key, keyPath)
      const isNaN = Object.is(Number(key), NaN);
      if (isNaN) {
        this.$router.push({
          name: key
        });
      } else {
        this.$router.push({
          name: 'playlistdetail',
          query: {
            id: key
          }
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
#aside {
  height: 100%;
  text-align: left;
  /deep/.ant-menu-item-group-title {
    font-size: 12px;
    cursor: default;
  }
  /deep/.ant-menu-submenu-title {
    font-size: 12px;
    padding: 8px 16px !important;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1.5;
    transition: all 0.3s;
    // > i::after:hover {
    //   background-color: rgba(0, 0, 0, 0.45);
    // }
  }
  /deep/li.ant-menu-item {
    padding: 0px 16px !important;
    &:hover {
      color: #000;
      background-color: #F6F6F7;
    }
    &::after {
      border-right-color: #ec4141;
    }
  }
  /deep/li.ant-menu-item.ant-menu-item-selected {
    color: #000;
    background-color: #F6F6F7;
  }
  // /deep/.ant-menu-submenu-active{
  //   color: rgba(0, 0, 0, 0.45);
  // }

  .aside-list {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #e6e6e6;
  }
  //   .aside-item {
  //     height: 45px;
  //     line-height: 45px;
  //     span {
  //       display: inline-block;
  //       width: 100%;
  //       padding: 0 15px;
  //       margin-bottom: 3px;
  //     }
  //     &:hover {
  //       background: #f6f6f7;
  //     }
  //   }
  //   .first-tree {
  //     padding: 7px 0 7px 15px;
  //     line-height: normal;
  //     font-size: 12px;
  //     color: #909399;
  //     cursor: default;
  //   }
  //   // 选中样式
  //   .active {
  //     background-color: #f6f6f7;
  //     color: #313131;
  //     font-weight: 700;
  //     font-size: 15px;
  //   }
  // }
}
</style>